<?php
// 获取数据
// 连接数据库
include "common.php";
// 获取多条数据
if(!empty($_GET['sort'])){
	$age=$_GET['sort'];
	$sql="SELECT * FROM student WHERE age>$age";
}else{
	$sql="SELECT * FROM student";
}

$res=mysqli_query($link,$sql);
// 执行结果集获取数据
$arr=[];
while($one=mysqli_fetch_assoc($res)){
	$arr[]=$one;
}
// echo "<pre>";
// print_r($arr);
// echo "</pre>";
// die;
$str=json_encode($arr);
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <div class="wrap">
      <div class="title">学生系统</div>
      <div id="form">
        <p>姓名<input id="username" type="text" value="张三123" /></p>
        <p>年龄<input id="age" type="text" value="21" /></p>
        <p>
          性别
          <select id="gender">
            <option>男</option>
            <option>女</option>
            <option>你猜</option>
          </select>
        </p>
        <p>
          <input type="button" value="添加" id="addBtn" />
          <input type="button" value="排序" id="sortBtn" />
        </p>
      </div>
      <table id="table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <script>
	  var data=<?php echo $str; ?>;
      let addbtn=document.querySelector("#addBtn");
	  let userEle=document.querySelector("#username");
	  let genderEle=document.querySelector("#gender");
	  let ageEle=document.querySelector("#age");
	  let tbodyEle = document.querySelector("tbody");
	  let sortEle = document.querySelector("#sortBtn");
	  addbtn.onclick=function(){
		let username = userEle.value;
		let gender = genderEle.value;
		let age = ageEle.value;
		window.location.href=`./addStudent.php?username=${username}&gender=${gender}&age=${age}`;
	  }
	  function renderDom(data){
		  tbodyEle.innerHTML="";
		  data.forEach(item=>{
			  let trEle=document.createElement("tr");
			  trEle.innerHTML=`<td>${item.username}</td><td>${item.age}</td><td>${item.gender}</td><td myid="${item.id}" class='del'>删除</td>`;
			  tbodyEle.appendChild(trEle);
		  })
	  }
	  renderDom(data);
	  // 删除功能;
	  let delBtns=document.querySelectorAll(".del");
	  delBtns.forEach(item=>{
		  item.onclick=function(){
			  let id =this.getAttribute("myid");
			  window.location.href=`delete.php?id=${id}`;
		  }
	  })
	  // 年龄大于25岁的人员筛选；
	  		sortEle.onclick = function(){
	  			window.location.href = "index.php?sort=25";
	  		}
			// 参数可以修改
    </script>
  </body>
</html>
